<script lang="ts">
  import { page } from "$app/stores";

  import { tooltip } from "$lib/js/tooltip";
  export let selected = "home";
</script>

<div
  class="relative flex flex-col items-center justify-center mt-1 mb-8 h-full"
>
  <div class="absolute top-0 ">
    <div class="flex flex-col items-center">
      <div class="grid grid-cols-2 ">
        <a
          class="col-span-2 flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
          class:selected={selected === "home"}
          use:tooltip={{ theme: "light" }}
          title="home"
          on:click={(event) => {
            selected = "home";
            console.log("got click home /", event);
          }}
          sveltekit:prefetch
          href="/"
        >
          <i
            class="fas fa-home  w-6 h-6 stroke-current text-2xl flex items-center justify-center"
            aria-hidden="true"
            class:active={$page.url.pathname === "/"}
          />
        </a>
        <button
          class="text-lg items-center text-center pl-1"
          use:tooltip={{ theme: "light" }}
          title="back"
          on:click={(event) => {
            console.log("got click back", event);
            window.history.back();
          }}
        >
          <i class="fas fa-arrow-left" />
        </button>
        <button
          class="text-lg items-center text-center px-1"
          use:tooltip={{ theme: "light" }}
          title="forward"
          on:click={(event) => {
            console.log("got click forward", event);

            window.history.forward();
          }}
        >
          <i class="fas fa-arrow-right" />
        </button>
      </div>

      <a
        class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
        class:selected={selected === "quizzes"}
        use:tooltip={{ theme: "light" }}
        title="quizzes"
        on:click={(event) => {
          selected = "quizzes";
          console.log("got click quizzes", event);
        }}
        sveltekit:prefetch
        href="/quizzes"
      >
        <i
          class="far fa-file-alt w-6 h-6 stroke-current text-2xl flex items-center justify-center "
          aria-hidden="true"
          class:active={$page.url.pathname === "/quizzes"}
        />
      </a>
      <a
        class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300 active:text-gray-200 active:bg-gray-700 "
        class:selected={selected === "tasks"}
        use:tooltip={{ theme: "light" }}
        title="tasks"
        on:click={(event) => {
          selected = "tasks";
          console.log("got click tasks", event);
        }}
        sveltekit:prefetch
        href="/tasks"
      >
        <i
          class="fa fa-tasks w-6 h-6 stroke-current  text-2xl"
          aria-hidden="true"
          class:active={$page.url.pathname === "/tasks"}
        />
      </a>
    </div>
    <div class="flex flex-col items-center mt-2 border-t border-gray-700">
      <a
        class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
        class:selected={selected === "my"}
        use:tooltip={{ theme: "light" }}
        title="my achievement"
        on:click={(event) => {
          selected = "my";
          console.log("got click my", event);
        }}
        sveltekit:prefetch
        href="/my"
      >
        <i
          class="fas fa-graduation-cap w-6 h-6 stroke-current  text-2xl"
          aria-hidden="true"
          class:active={$page.url.pathname === "/my"}
        />
      </a>
      <a
        class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
        class:selected={selected === "todos"}
        use:tooltip={{ theme: "light" }}
        title="todos"
        on:click={(event) => {
          selected = "todos";
          console.log("got click todos", event);
        }}
        sveltekit:prefetch
        href="/todos"
      >
        <i
          class="fas fa-shopping-cart w-6 h-6 stroke-current  text-2xl"
          aria-hidden="true"
          class:active={$page.url.pathname === "/todos"}
        />
      </a>
      <a
        class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300"
        class:selected={selected === "customprotocol"}
        use:tooltip={{ theme: "light" }}
        title="customprotocol"
        on:click={(event) => {
          selected = "customprotocol";
          console.log("got click customprotocol", event);
        }}
        sveltekit:prefetch
        href="/customprotocol"
      >
        <i
          class="fas fa-user-friends  w-6 h-6 stroke-current text-2xl "
          aria-hidden="true"
          class:active={$page.url.pathname === "/customprotocol"}
        />
      </a>

      <a
        class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300 active:text-gray-200 active:bg-gray-700 "
        class:selected={selected === "graphql"}
        use:tooltip={{ theme: "light" }}
        title="graphql"
        on:click={(event) => {
          selected = "graphql";
          console.log("got click graphql", event);
        }}
        sveltekit:prefetch
        href="/graphql"
      >
        <i
          class="fab fa-searchengin w-6 h-6 stroke-current text-3xl "
          aria-hidden="true"
          class:active={$page.url.pathname === "/graphql"}
        />
      </a>

      <a
        class="flex items-center justify-center w-12 h-12 mt-2 rounded hover:bg-gray-700 hover:text-gray-300 active:text-gray-200 active:bg-gray-700 "
        class:selected={selected === "explorer"}
        use:tooltip={{ theme: "light" }}
        title="explorer"
        on:click={(event) => {
          selected = "explorer";
          console.log("got click explorer", event);
        }}
        sveltekit:prefetch
        href="/explorer"
      >
        <i
          class="fas fa-book-open w-6 h-6 stroke-current text-2xl "
          aria-hidden="true"
          class:active={$page.url.pathname === "/explorer"}
        />
      </a>
    </div>
  </div>
  <a
    class="absolute bottom-0 flex items-center justify-center w-12 h-12 mt-auto mb-4 rounded hover:bg-gray-700 hover:text-gray-300"
    class:selected={selected === "me"}
    use:tooltip={{ theme: "light" }}
    title="me"
    on:click={(event) => {
      selected = "me";
      console.log("got click me", event);
    }}
    href="/me"
  >
    <i
      class="fas fa-user-cog w-6 h-6 stroke-current text-2xl "
      aria-hidden="true"
      class:active={$page.url.pathname === "/me"}
    />
  </a>
</div>

<style>
  /* RESETS */
  :global(*),
  :global(*::before),
  :global(*::after) {
    box-sizing: border-box;
  }
  :global(*:focus) {
    outline: 3px dashed #228bec;
    outline-offset: 0;
  }
  :global(.selected) {
    color: #fff;
    background-color: #000;
  }
  :global(.selected:disabled) {
    color: darkgrey;
    background-color: #565656;
  }
</style>
